<template>
	<view :class="['container',{'dark':theme == 'dark'}]">

		<view :class="['top1',{'dark':theme == 'dark'}]">
			<view class="flex t1"> 
				<view class="flex t1left">
					<image :src="theme=='dark' ? '/static/images/bico2.png' : '/static/images/bico1.png'" class="flex_image3"></image>
					<view>EP</view>
				</view>
				<view class="flex t1right">
					<image :src="theme=='dark' ? '/static/images/kf2.png' : '/static/images/kf1.png'" class="flex_image4" @click="gocontact"></image>
				</view>
			</view>
		</view>

		<view :class="['top',{'dark':theme == 'dark'}]">

			<!-- 3D 新版轮播图开始 -->
			<view class="wrap2 t2">
				<u-swiper :list="bannerList" bg-color="#22253c00" name="img" mode="round" height="400" effect3d-previous-margin="0" border-radius="10" :effect3d="true" indicator-pos="bottomCenter">
				</u-swiper>
			</view>
			
			<!-- 新版轮播图结束 -->
			
			<!-- 公告 -->
			<view class="lind">
				<view class="flex lindBox" @click="toAdv">
					<image :src="theme=='dark' ? '../../static/ico/gfgg2.png' : '../../static/ico/gfgg.png'" class="flex_image22"></image>
					<swiper style="width: 100%;height: 40rpx;" :vertical="true" :autoplay="true" :interval="3000"
						:circular="true">
						<swiper-item class="flex alcenter" v-for="(item,i) in noticeList" :key="i">
							<view class="lindText">{{item.title}}</view>
						</swiper-item>
					</swiper>
					<view class="wtr0_lin">
					<image :src="theme=='dark' ? '/static/image/dian2.png' : '/static/image/dian1.png'" class="flex_image222"></image>
					</view>
				</view>
			</view>
			<view class="flex t3">
				<view class="t3Item t3ItemLeft" v-for="(item,i) in (current!=1?quoList:recomList).slice(0,10)"
					:key="item.symbol" @click="linkKline(current==1?1:0,item.symbol)">
					<view class="t3ItemSymbol">{{item.symbol}} <span
							:class="['t3ItemM2',parseFloat(item.rose) <0?'redColor':'greenColor']">{{(parseFloat(item.rose)) < 0 ? '' : '+'}}{{(item.rose-0) | toFixed2}}%</span>
					</view>
					<view :class="['t3ItemM1',parseFloat(item.rose) <0?'redColor':'greenColor']">{{item.close}}</view>
					<view class="t3ItemM3">≈ {{item.cny}} CNY</view>
				</view>
			</view>
			<view class="toptf" @click="showChatModel">
				<view class="t3 tf3">
					<u-image  width="100%" height="150rpx" src="../../static/chat.png" border-radius="4" bg-color="#02072300">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
			</view>
		</view>
		<!-- 导航 A -->
		
		<view>
			<u-grid :col="5" :border="false">
				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(15)">
						<image src="../../static/ico/fbjy.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('login.c3')}}</view>
					</view>
				</u-grid-item>
				
				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(13)">
						<image src="../../static/ico/czbz.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('home.chongbi1')}}</view>
					</view>
				</u-grid-item>

				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(11)">
						<image src="../../static/ico/hzbz.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('home.chongbi3')}}</view>
					</view>
				</u-grid-item>
				
				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(12)">
						<image src="../../static/ico/txbz.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('home.chongbi2')}}</view>
					</view>
				</u-grid-item>
				<!-- 资产 -->
				
				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(10)">
						<image src="../../static/ico/wdzc.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('home.chongbi4')}}</view>
					</view>
				</u-grid-item>

				

			</u-grid>
		</view>
		
		<!-- 导航 B -->
		<view>
			<u-grid :col="5" :border="false">

				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(14)">
						<image src="../../static/ico/sbsq.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('login.c4')}}</view>
					</view>
				</u-grid-item>
				
				<!-- 星链矿机 -->
				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(22)">
						<image src="../../static/ico/sckw.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('login.c5')}}</view>
					</view>
				</u-grid-item>
				
				<!-- 用户闪付 -->
				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(21)">
						<image src="../../static/ico/sddh.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('login.c6')}}</view>
					</view>
				</u-grid-item>
				
				<!-- 邀请好友 -->
				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(18)">
						<image src="../../static/ico/yqhy.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('login.c7')}}</view>
					</view>
				</u-grid-item>
				
				<!-- 每日签到 -->
				<u-grid-item :class="['flex','botBox',{'darksss':theme == 'dark'}]">
					<view class="botBoxItem" @click="funsItemClick(23)">
						<image src="../../static/ico/mrqd.png" class="flex_image2"></image>
						<view class="grid-text">{{$t('login.c8')}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 导航 B 结束 -->
		
		<view class="flex mid">
			<view class="midRight">
				<view :class="['flex','midRightTop',{'darksss':theme == 'dark'}]"  @click="funsItemClick(17)">
					<image class="image2" src="../../static/images/c1.png" mode=""></image>
					<view>
						<view class="midRightText1">{{$t('login.c9')}}</view>
						<view class="midRightText2">{{$t('login.c10')}}</view>
					</view>
				</view>
				<view :class="['flex','midRightBottom',{'darksss':theme == 'dark'}]" @click="funsItemClick(19)">
					<image class="image3" src="../../static/images/c3.png" mode=""></image>
					<view<view >
						<view class="midRightText1">{{$t('login.c11')}}</view>
						<view class="midRightText2">{{$t('login.c12')}}</view>
					</view>
				</view>
			</view>
			
			<view class="midRight">
				<view :class="['flex','midRightTop',{'darksss':theme == 'dark'}]" @click="funsItemClick(16)">
					<image class="image2" src="../../static/images/c0.png" mode=""></image>
					<view>
						<view class="midRightText1">{{$t('login.c13')}}</view>
						<view class="midRightText2">{{$t('login.c14')}}</view>
					</view>
				</view>
				
				<view :class="['flex','midRightBottom',{'darksss':theme == 'dark'}]" @click="funsItemClick(20)">
					<image class="image3" src="../../static/images/c2.png" mode=""></image>
					<view >
						<view class="midRightText1">{{$t('login.c15')}}</view>
						<view class="midRightText2">{{$t('login.c16')}}</view>
					</view>
				</view>
			</view>
			
		</view>
		
        <view :class="['listBox','funs',{'darksss':theme=='dark'}]">
            <scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true"
				:show-scrollbar="false">
				<u-row gutter="20">
					<u-col span="4">
						<view class="">
							<view :class="['listTag1',current==0?'listTagAcitve':'']" @click="changeBang(0)">{{$t('login.c17')}}</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="">
							<view :class="['listTag2',current==1?'listTagAcitve':'']" @click="changeBang(1)">{{$t('login.c18')}}</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="">
							<view :class="['listTag3',current==2?'listTagAcitve':'']" @click="changeBang(2)">{{$t('login.c19')}}</view>
						</view>
					</u-col>
				</u-row>
			</scroll-view>
			
			<!-- 加一条线 -->
			<u-line color="#5559691f"></u-line>
			<swiper class="tab-box" style="height:1100rpx;" ref="swiper1" :current="current" :duration="300"
				@change="onswiperchange" @animationfinish="animationfinish">
				<!-- 币币指数 -->
				<swiper-item class="swiper-item">
					<view class="list">
						<view class="flex listItem" v-for="(item,i) in quoList" :key="i" @click="linkKline(current,item.symbol)">
							<view class="itemLeft">
								<view class="itemLeftView1">
									<image :src="item.img" style="width: 5vw;height: 5vw;margin-right: 2vw;border-radius: 10vw;position: relative;top: 1vw;"></image>
									{{item.symbol.split('/')[0]}}<text>/{{item.symbol.split('/')[1]}}</text>
								</view>
								<view class="itemLeftView2">vol:{{item.high}}</view>
							</view>
							<view class="itemCenter bgtxt4">
								<view :class="['itemCenterView1',parseFloat(item.rose) <0?'redColor':'greenColor']">
									{{item.close}}
								</view>
								<view class="itemLeftView2">≈ {{item.cny}} CNY</view>
							</view>
							<view :class="['itemRight',parseFloat(item.rose)<0?'bt2':'bt1']">
								{{(parseFloat(item.rose))<0 ? '' : '+'}}{{(item.rose-0) | toFixed2}}%
							</view>
						</view>
					</view>
				</swiper-item>
				<!-- 永续合约 -->
				<swiper-item class="swiper-item">
					<view class="list">
						<view class="flex listItem" v-for="(item,i) in recomList" :key="i" @click="linkKline(current,item.symbol)">
							<view class="itemLeft">
								<view class="itemLeftView1">
									<image :src="item.img" style="width: 5vw;height: 5vw;margin-right: 2vw;border-radius: 10vw;position: relative;top: 1vw;"></image>
									{{item.symbol.split('/')[0]}}<text>/{{item.symbol.split('/')[1]}}</text>
								</view>
								<view class="itemLeftView2">vol:{{item.high}}</view>
							</view>
							<view class="itemCenter bgtxt4">
								<view :class="['itemCenterView1',parseFloat(item.rose) <0?'redColor':'greenColor']">
									{{item.open}}
								</view>
								<view class="itemLeftView2">≈ {{item.cny}} CNY</view>
							</view>
							<view :class="['itemRight',parseFloat(item.rose)<0?'bt2':'bt1']">
								{{(parseFloat(item.rose))<0 ? '' : '+'}}{{(item.rose-0) | toFixed2}}%
							</view>
						</view>
					</view>
				</swiper-item>
				<!-- 期权合约 -->
				<swiper-item class="swiper-item">
					<view class="list">
						<view class="flex listItem" v-for="(item,i) in optionList" :key="i" @click="linkKline(current,item.symbol,item)">
							<view class="itemLeft">
								<view class="itemLeftView1">
									<!-- {{item.name}} --><text>{{item.symbol}} {{$t('bico.W691')}}</text>
								</view>
							</view>
							<view class="itemCenter">
							</view>
							<view :class="['itemRight',parseFloat(item.rose)<0?'bt2':'bt1']">
								{{(parseFloat(item.rose))<0 ? '' : '+'}}{{(item.rose-0) | toFixed2}}%
							</view>
							<!-- <view class="itemRight bt1">
								 {{$t('login.c20')}}  {{item.maxOptionNo}}  {{$t('login.c21')}} 
							</view> -->
						</view>
					</view>
				</swiper-item>
			</swiper>
			<u-popup v-model="passShow" mode="center" width="90%" height="25%" border-radius="10">
				<view class="passbox">
					{{$t('bico.W789')}}
					<view class="input">
						<view>
							<input class="uni-input" cursor-spacing="0"
								   :adjust-position="false" v-model="chatPassword" type="text"
								   :placeholder="$t('bico.W792')" />
						</view>
					</view>
					<view class="btns">
						<view @click="chatPassword='';passShow = false" class="btn cancel">{{$t('bico.W18')}}</view>
						<view @click="checkChatPwd(chatPassword)" class="btn cancell" :class="chatPassword ? 'submit' : 'cancel'">{{$t('bico.W19')}}</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	var socketInstance;
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		commonNewsList,
		commonCarousel,
		commonContact ,
		huobiTicket,
		optionSymbolInfo,
		info,
		logout,commonVersion,commonChatConfigs,checkChatPwd
	} from '../../common/apiString.js'
	import { checkUpdate } from "@/components/yzhua006-update/js/app-update-check.js";
	export default {
		data() {
			return {
				mycontact:{},
				list: [{
						image: '../../static/purchase/1.png',
					},
					{
						image: '../../static/purchase/2.png',
					},
					{
						image: '../../static/purchase/3.png',
					},
					{
						image: '../../static/purchase/4.png',
					},
					{
						image: '../../static/purchase/5.png',
					},
					{
						image: '../../static/purchase/6.png',
					},
					{
						image: '../../static/purchase/7.png',
					},
					{
						image: '../../static/purchase/8.png',
					}
				],
				
				indicatorLineLeft: 0,
				indicatorLineWidth: 0,
				isTap: 0,
				current: 0,
				swiperCurrent: 0,
				bannerList: [],
				noticeList: [],
				quoList: [],
				optionList: [],
				recomList: [],
				title: 'Hello',
				showLeft: false,
				showMask: false,
				fingerBool: "0",
				token: '',
				isface: 0,
				info: '',
				head: '../../static/image/head.png',
				cny_rate: '',
				languages: {
					zh: {
						name: '中文',
						img: '/static/image/zh.png'
					},
					en: {
						name: 'English',
						img: '/static/image/en.png'
					},
					hk: {
						name: '繁體中文',
						img: '/static/image/hk.png'
					},
					jp: {
						name: '日本語',
						img: '/static/image/jp.png'
					},
				},
				tablist: [{
					id: 'tab00',
					name: '币币指数'
				}, {
					id: 'tab01',
					name: '永续合约'
				}, {
					id: 'tab02',
					name: '期权交易',
					//count: 5
				}],
				lang: '',
				isshowlang: false,
				getList: null,
				chatPassword:'',
				passShow:false,
				needChatPwd:true,
				chatPwdFlag:false,
				chatName:"聊天室1",
				chatDesc:"聊天室描述1",
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		watch: {
			lod(val) {
				if (val) {
					this.getBannerImg();
					this.getNoticeList();
				}
			}
		},
		filters: {
			toFixed2: function(value, options) {
				value = Number(value);
				return value.toFixed(2);
			},
		},
		onLoad:function(option) {
			var token = uni.getStorageSync('token');
			this.lang = uni.getStorageSync('lang');
			if(option.code){
				console.log(option.code)
			}
			
			if (token) {
				this.getUserInfo();
			}
			
			this.getBannerImg();
			this.getNoticeList();
			this.contact()
		},
		beforeDestroy() {
			clearInterval(this.getList);
		},
		onHide() {
			//this.$socket.closeSocket(socketInstance);
			clearInterval(this.getList);
		},
		mounted() {
			this.showLeft = false;
			this.showMask = false;
			this.token = uni.getStorageSync('token');
			var that = this
			// that.getList = setInterval(function() {
			// 	that.quotation();
			// }, 2000)

			this.getMkar(0)
			this.getMkar(1)
			this.getMkar(2)
			this.fingerBool = uni.getStorageSync('fingerBool')
			
			this.changeFooter();
		},
		onShow(){
			var that = this
			console.log(this.theme)
			if(this.theme=='dark'){
				uni.setNavigationBarColor({
					frontColor:"#ffffff",
					backgroundColor:"#041525"
				})
			}else{
				uni.setNavigationBarColor({
					frontColor:"#000000",
					backgroundColor:"#3e38ec"
				})
			}
			this.getNoticeList();
			that.getList = setInterval(function() {
				that.quotation();
			}, 2000)
			that.getChatConfig()
			//这里可以适当延时执行
			// #ifdef APP-PLUS
			this.getAppInfo(0); //获取线上APP版本信息  参数type 0自动检查  1手动检查（手动检查时，之前取消更新的版本也会提示出来）
			// #endif 
		},
		methods: {
			getChatConfig(){
				var that=this
				this.$utils.initData({url:commonChatConfigs,type:'post'},(res,msg)=>{
				  that.chatName=res.chatName
				  that.chatDesc = res.chatDesc
				  that.needChatPwd = res.chatOpen=='Y'
				});
			},
			checkChatPwd(pwd){
				var that=this
				that.$utils.initDataToken({url:checkChatPwd,data:{pwd:pwd},type:'post'},(res,msg)=>{
					
				  that.funsItemClick(24)
				});
			},
			showChatModel(){
				
				if(this.needChatPwd){
					this.passShow = true
				  if(this.chatPassword){
				    this.checkChatPwd(this.chatPassword)
				    return
				  }
				 
				}else{
				  this.funsItemClick(24)
				}
				console.log( this.passShow)
			},
			//获取线上APP版本信息
			getAppInfo(type) {
			    const system_info = uni.getSystemInfoSync();
			    let params = {
			        os: system_info.platform //本机设备操作系统  （android || ios）
			    }
			    if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false
				//测试使用的是qqapk，上线清空
				var appUrl = ""
				//安卓
				var type = ""
				if(params.os == 'android'){
					type="ANDROID"
				}
				//苹果
				if(params.os == 'ios'){
					type="IOS"
				}
					//版本 ，后台版本控制，和本地uniapp版本对比，高于本都版本才会触发强制更新
				var myversion = '1.0.0'
			    //这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息
				this.$utils.initData({
					url: commonVersion,
					data: {
						type: type
					},
					type: 'post'
				}, (res, msg) => {
					myversion = res.version
					appUrl = res.address
					var t = res.content
					//请求获取最新版本
					setTimeout(() => {
					    let update_info = {
					        version: myversion, //线上版本
					        now_url: appUrl, //更新链接
					        silent: 0, //是否是静默更新
					        force: 1, //是否是强制更新
					        net_check: 1, //非WIfi是否提示
					        note: t, //更新内容
					    }
					    checkUpdate(update_info, type).then(res => {
					        if (res.msg) {
					            //plus.nativeUI.toast(res.msg);
					        }
					    }); ///检查更新
					    //checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
					    //跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
					}, 200)
				})
			    
			},
			showL(text){
				this.$utils.showLayer(text);
			},
			linkKline(type,symbol,item) {
				uni.setStorageSync("klineSymbol",symbol)
				if(type == 2){
					uni.navigateTo({
						url: '/pages/Option/Option?id='+item.id //期权秒合约
					})
				}
				if(type == 1){
					uni.switchTab({
						url: '/pages/lever/lever'
					});
				}
				if(type == 0){
					uni.switchTab({
						url: '/pages/trade/trade'
					});
				}
			},
			gocontact(){
			 // #ifdef APP
			 //移动端
			 plus.runtime.openURL(this.mycontact)
			 // #endif	
			 //#ifdef H5
			 //window.location.href = this.mycontact;
			 window.open(this.mycontact, '_blank');
			 //#endif
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.changeTab(index);
			},
			changeTab(index) {
				this.current = index
			},
			toAdv() {
				uni.navigateTo({
					url: '/pages/neWs/neWs' //公告
				})
			},
			closeSocket() {
				this.$socket.closeSocket(socketInstance);
			},

			funsItemClick(index) {
				if (index == 10) {
					uni.navigateTo({
						url: '/pages/assets/assets' //资产
					})
				};
				if (index == 11) {
					uni.navigateTo({
						url: '/pages/assets/transfer' //划转
					})
				};
				if (index == 12) {
					uni.navigateTo({
						url: '/pages/assets/mention' //提币
					})
				};
				if (index == 13) {
					uni.navigateTo({
						url: '/pages/assets/charge' //冲币
					})
				};

				if (index == 14) {
					uni.navigateTo({
						url: '/pages/Apply/Apply' //申请上币
					})
				};
				if (index == 15) {
					uni.navigateTo({
						url: '/pages/otc/otc' //法币交易
					})
				};
				if (index == 5) {
					uni.navigateTo({
						url: '/pages/assets/assets' //我的资产
					})
				};
				if (index == 16) {
					uni.navigateTo({
						url: '/pages/Option/Option' //期权秒合约
					})
				};
				if (index == 17) {
					uni.navigateTo({
						url: '/pages/business/business' //法币商家
					})
				};
				if (index == 18) {
					uni.navigateTo({
						url: '/pages/share/share' //邀请好友
					})
				};
				if (index == 19) {
					uni.navigateTo({
						url: '/pages/financial/financial' //理财生息
					})
				};
				if (index == 20) {
					uni.navigateTo({
						url: '/pages/purchase/purchase' //新币认购
					})
				};
				if (index == 21) {
					uni.navigateTo({
						url: '/pages/StationPay/StationPay' //闪电转账
					})
				};
				if (index == 22) {
					uni.navigateTo({
						url: '/pages/mstarch/mstarch' //星链矿机
					})
				};
				if (index == 23) {
					uni.navigateTo({
						url: '/pages/Signin/Signin' //每日签到
					})
				};
				if(index==24){
					this.passShow=false
				  uni.navigateTo({
				    url:'/pages/usreMei/chat'//聊天室
				  })
				};
			},


			noOpen() {
				plus.nativeUI.toast('功能暂未开放！', {
					verticalAlign: "center"
				});
			},
			
			
			// 切换夜间模式
			switchChange(e) {
				console.log(e.target.value)
				var ui = (this.theme == 'light') ? 'dark' : 'light';
				uni.setStorageSync('theme', ui)
				this.$store.dispatch("changeTheme", ui);
				this.$utils.setTheme(ui);
				if (ui == 'dark') {
					uni.setTabBarStyle({
						color: '#a2a6a5',
						selectedColor: '#1881d2',
						backgroundColor: '#0f1a2d',
						borderStyle: 'white'
					})
				} else {
					uni.setTabBarStyle({
						color: '#8b97a0',
						selectedColor: '#238ee1',
						backgroundColor: '#ffffff',
						borderStyle: 'white'
					})

				}
			},
			uploadImg() {
				var that = this;
				uni.chooseImage({
					count: 1,
					// sizeType: ['original', 'compressed'],
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: '/api/upload', //仅为示例，非真实的接口地址
							// #ifdef APP-PLUS
							url: domain + '/api/upload',
							// #endif
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(typeof uploadFileRes.data);
								var data = JSON.parse(uploadFileRes.data);
								if (data.type == 'ok') {
									let head = data.message;
									console.log(head)
									that.uphead(head);
								}
							}
						});
					}
				});
			},
			uphead(head) {
				let that = this;
				this.$utils.initDataToken({
					url: 'user/head_pic',
					data: {
						head_portrait: head
					},
					type: 'post'
				}, (res, msg) => {
					that.head = head;
				});
			},
			changeFooter() {
			  uni.setTabBarItem({
			    index: 0,
			    text: this.$t('tabBar.index')
			  });
			  uni.setTabBarItem({
			    index: 1,
			    text: this.$t('tabBar.business')
			  });
			  uni.setTabBarItem({
			    index: 2,
			    text: this.$t('tabBar.perpetual')
			  });
			  uni.setTabBarItem({
			    index: 3,
			    text: this.$t('tabBar.agreements')
			  });
			  uni.setTabBarItem({
			    index: 4,
			    text: this.$t('tabBar.mine')
			  });
			},
			go() {
				uni.navigateTo({
					url: '/pages/mine/commission'
				})
			},
			// 语言切换
			changeLang(lang) {
				this.$utils.initData({
					url: 'lang/set',
					data: {
						lang
					},
					type: 'POST'
				}, (res) => {
					console.log(lang);
					this.lang = lang;
					uni.setStorageSync('lang', lang)
					this.$i18n.locale = lang;
					this.isshowlang = false;
					this.changeFooter();
					this.showLeft = false;
					this.showMask = false;
					this.token = uni.getStorageSync('token');
					this.getBannerImg();
					this.getNoticeList();
				})
			},
			//轮播图
			getBannerImg() {
				
				this.$utils.initData({
					url: commonCarousel,
					data: {
						c_id: 5
					},
					type: 'POST'
				}, (res, msg) => {
					console.log(res)
					uni.stopPullDownRefresh()
					this.bannerList = res;
					
				})
			},
			//公告
			getNoticeList() {
				
				this.$utils.initData({
					url: commonNewsList,
					data: {
						language: uni.getStorageSync('lang')
					},
					type: 'POST'
				}, (res, msg) => {
					uni.stopPullDownRefresh()
					this.noticeList = res.records;
				})
			},
			//行情交易对
			quotation() {
				// if (this.current != 2) {
				// 	this.$utils.initDataToken({
				// 		url: optionSymbolInfo,
				// 		type: 'get'
				// 	}, (res, msg) => {
				// 		this.optionList = res.data
				// 	})
				// } else {
					this.$utils.initData({
						url: huobiTicket,
						data: {
							type: this.current ==1?1:0
						},
						type: 'post'
					}, (res, msg) => {
						//uni.stopPullDownRefresh();
						let usdtData = res.find((item) => item.name == 'USDT');
						this.cny_rate = !usdtData ? 6.9 : usdtData.fiat_convert_cny;
						res.sort(function(a, b) {
							return b.change - a.change
						});
						if (this.current == 0) {
							this.quoList = res;
						} else {
							this.recomList = res;
						}
					})
				// }

			},
			contact() {
				this.$utils.initData({
					url: commonContact,
					type: 'post'
				}, (res, msg) => {
					//uni.stopPullDownRefresh();
					this.mycontact = res
				})
			},
			onswiperchange(e) {
				// 注意：百度小程序会触发2次
				// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
				let index = e.target.current || e.detail.current;
				this.changeTab(index);
				// #endif
			},
			animationfinish(e) {
				// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
				let index = e.detail.current;
				this.changeTab(index);
				// #endif
			},
			changeBang(type) {
				if (this.current == type) {
					return;
				}
				this.current = type;
				this.getMkar(type)

			},
			getMkar(type) {
				
				if (type == 2) {
					this.$utils.initDataToken({
						url: optionSymbolInfo,
						type: 'get'
					}, (res, msg) => {
						// for (let s of res.data) {
						// 	var symbolData=this.quoList.filter((item) => {
						// 		return item.symbol == s.symbol;
						// 	})
						// 	s.rose = symbolData[0].rose
						// }
						this.optionList = res.data
					})
				} else {
					this.$utils.initData({
						url: huobiTicket,
						data: {
							type: type
						},
						type: 'post'
					}, (res, msg) => {
						//uni.stopPullDownRefresh();
						//debugger
						if (type == 0) {
							this.quoList = res;
						} 
						if(type==1){
							this.recomList = res;
						}
							
						
					})
				}
			},

			show() {
				if (this.token) {
					this.getUserInfo();
				}
				this.showLeft = !this.showLeft
			},
			hide() {
				console.log("guanbiyemian")
				this.showLeft = !this.showLeft
			},
			stop() {

			},
			//获取用户信息
			getUserInfo() {
				var that = this;
				this.$utils.initDataToken({
					url: info,
					data: {},
					type: 'POST'
				}, (res, msg) => {
					uni.stopPullDownRefresh()
					uni.setStorageSync('uid', msg.id);
					that.info = res;
					if (res.head_portrait) {
						that.head = res.head_portrait;
					}
				});
			},
			//退出登录
			logout() {
				this.$utils.initDataToken({
					url: logout,
					data: {},
					type: 'POST'
				}, (res, msg) => {
					this.$utils.clearStorageSync()

					setTimeout(() => {
						this.$utils.showLayer(msg);
					}, 100)
					uni.redirectTo({
						url: '/pages/login/login'
					});
				});
			},
		},
		onPullDownRefresh() {
			this.getBannerImg();
			this.getNoticeList();
			this.quotation();
		}
	}
</script>
<style scoped>
	.passbox {
	    position: inherit;
	    background: #fff;
	    display: flex;
	    flex-direction: column;
	    padding: 30px 15px;
	    font-size: 14px;
	    border-radius: 2vw;
	}
	
	.input {
		line-height: 1.8;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 14upx 10upx;
		margin: 20upx 0;
		    border: 0.5px solid #b2b9deab;
		    border-radius: 4px;
	
		input {
			color: #0952C3;
			font-size: 28upx;
		}
	
		.cny {
			line-height: 1.8;
			margin-right: 20upx;
			color: #0952C3;
		}
	
		.all {
			line-height: 1.8;
			margin-left: 20upx;
			color: #0952C3;
		}
	}
	.input {
		line-height: 1.8;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		padding: 14upx 10upx;
		margin: 20upx 0;
		    border: 0.5px solid #b2b9deab;
		    border-radius: 4px;
	
		input {
			color: #0952C3;
			font-size: 28upx;
		}
	
		.cny {
			line-height: 1.8;
			margin-right: 20upx;
			color: #0952C3;
		}
	
		.all {
			line-height: 1.8;
			margin-left: 20upx;
			color: #0952C3;
		}
	}
	.btns {
		line-height: 1.8;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	    padding: 16px 70px;
		
		
	}
	.btn {
		display: block;
		width: 40%;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		color: #fff;
		border-radius: 0;
		font-size: 28upx;
		border-radius: 4px;
	}
				
	.cancel {
		background: #2979ff;
	}
				
				
	.submit {
		background: #0952C3;
	}
	.top1 {
		padding: 8vw 3vw 4vw;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: #FFF;
	}
	.wrap2 {
			padding: 0vw;
		}
	.flex {
		display: flex;
		align-items: center;
	}

	.itemLeftView1 {
		    font-size: 14px;
		    font-weight: 400;
			font-family: Times New Roman,Times,serif;
	}

	.itemLeftView1>text {
		
		    font-size: 14px;
		    font-weight: 400;
	}

	.itemLeft {
		width: 38%;
	}

	.itemCenter {
		flex: 1
	}

	.itemCenterView1 {
		font-size: 14px;
		font-weight: 400;
	}

	.itemLeftView2 {
		padding-top: 10rpx;
		font-size: 12px;
		color: #999;
	}

	.itemRight {
		font-weight: 400;
		color: #fff;
		width: 64px;
		border-radius: 4px;
		text-align: center;
		padding: 14rpx 0;
		font-size: 14px;
	}

	.bt1 {
		background-color: #12b886;
	}

	.bt2 {
		background-color: #cd3d58;
	}

	.listItem {
		padding: 16rpx 0;
		border-bottom: solid 0vw #5559690f;
	}

	.list {
		padding: 0rpx 0;
	}
	
    .listTag2 {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 14px;
		font-weight: 400;
	}
	
	.listTag2 {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex: 1;
		font-size: 14px;
		font-weight: 400;
		
	}
	
    .listTag3 {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		flex: 1;
		text-align: right;
		font-size: 14px;
		font-weight: 400;
	}
	.listTagAcitve {
		border-bottom: solid 0px #007AFF;
		font-size: 14px;
		font-weight: 400;
		color: #007aff;
	}

	.listBox {
		padding: 0vw 2vw;
		background-color: #fff;
		width: 98%;
		margin: 0 auto 0vw auto;
		border-radius: 0.5vw;
	}
	.bgtxt1 {
	    position: relative;
		border: 0;
		overflow: visible;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 1;
		transition: all 0.15s;
		height: 30px;
		line-height: 30px;
		width: 21vw;
		position: relative;
		left: -1vw;
	}
	.bgtxt2 {
	        position: relative;
	        left: 7vw;
	}
	
	.bgtxt3 {
	        position: relative;
	        left: 15vw;
	}
	
	.bgtxt4 {
	        position: relative;
	        left: 4vw;
	}

	.bot {
		padding: 1vw 1vw 0vw;
	}

	.botBox {
		width: 100%;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 0.5vw;
		height: 16vw;
	}

	.botBoxItem {
		padding: 0 0;
		text-align: center;
	}


	.botBoxItem>view {
		padding-top: 0px;
		font-weight: 400;
		font-size: 14px;
	}

	.mid {
		padding: 1vw 1vw;
		justify-content: space-between;
	}

	.tab-bar-line {
		height: 1px;
		background-color: #cccccc;
	}

	.tab-box {
		flex: 1;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 20px;
		padding-right: 10px;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 15px;
		height: 40px;
		line-height: 40px;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.midLeft {
		width: 49.4%;
		padding: 3vw 0 4vw 2vw;
		text-align: center;
		background-color: #fff;
		border-radius: 0.5vw;
	}

	.midLeftText1 {
		font-weight: 400;
		font-size: 14px;
	}

	.midLeftText2 {
		color: #999;
	}

	.midRight {
		width: 49.5%;
	}

	.midRightTop,
	.midRightBottom {
		padding: 2.2vw 0 2.2vw 6vw;
		background-color: #fff;
		border-radius: 0.5vw;
	}

	.midRightTop {
		margin-bottom: 1vw;
	}

	.image1 {
		width: 14vw;
		height: 14vw;
		border-radius: 0%;
	}

	.image2 {
		margin-right: 6vw;
		width: 10vw;
		height: 10vw;
		border-radius: 0%;
	}

	.image3 {
		margin-right: 6vw;
		width: 10vw;
		height: 10vw;
		border-radius: 0%;
	}

	.midRightText1 {
		font-size: 14px;
		font-weight: 400;
	}

	.midRightText2 {
		color: #999;
		margin-top: 3vw;
		font-size: 12px;
	}

	.red {
		color: red;
	}

	.green {
		color: #27AF82;
	}

	.container {
		min-height: 100%;
		background-color: #f7f7f7;
	}

	.top {
		padding: 50px 8px 15px;
		background-color: #ffffff;
	}

	.t1 {
		padding: 0vw 0vw;
		justify-content: space-between;
	}

	.t2 {
		padding-top: 7.5vw;
	}

	.t1left>image {
		margin-right: 2vw;
		width: 6vw;
		height: 6vw;
	}

	.t1left>view {
		font-weight: 700;
		font-size: 4vw;
		position: relative;
		top: 12px;
		left: 0vw;
	}

	.icon-xiaoxi2,
	.icon-search {
		font-size: 14px;
		color: #666;
		font-weight: 400;
		margin-left: 30rpx;
	}

	.swiper-item {
		height: 48vw;
		/* background-color: #ddd;
		color: red; */
		border-radius: 1vw;
		overflow: auto;
	}

	.swiper-item>image {
		width: 100%;
		height: 48vw;
	}

	.t3 {
		padding: 4vw 0 0;
		/* justify-content: space-between; */
		overflow: auto;
	}
	.tf3{
		background-image: linear-gradient(to bottom right,#000f61,#020723);
		border-radius: 4px;
	}

	.t3Item {
		font-weight: 400;
		//text-align: center;
		margin-right: 2px;
	}

	/* .t3ItemLeft{
		
	}
	.t3ItemCenter{
		
	}
	.t3ItemRight{
		
	} */
	.t3ItemSymbol {
		font-size: 14px;
		font-weight: 400;
		padding: 1vw 0;
		width: 34vw;
		font-family: Times New Roman,Times,serif;
	}

	.t3ItemM1 {
		font-size: 14px;
		padding: 1vw 0;
		font-weight: bold;
	}

	.t3ItemM2 {
		font-size: 3vw;
		padding: 1vw 1vw;
	}

	.t3ItemM3 {
		font-size: 12px;
		padding: 0.5vw 0;
		    color: #999999;
	}

	.lind {
		margin-top: 0vw;
	}

	.lindBox {
		padding: 2vw 1vw;
		width: 100%;
		
		border-bottom: solid 0.5px #36373e36;
		border-radius: 0vw;
		height: 10vw;
	}

	.lindText {
		font-size: 14px;
		padding-left: 4vw;
		height: 16px;
		font-weight: 400;
	}
	
	.wt20_h20 {
		width: 7vw;
		height: 5vw;
	}

	.wt20_h200 {
		width: 5.3vw;
		height: 5.3vw;
	}

	.wtr0_lin {
		width: 9vw;
		font-size: 14px;
		font-weight: 400;
		color: #2196F3;

	}
	
	
	.flex_image222{
		width: 7.5vw;
		height: 7.5vw;
		border-radius: 0%;
		position: relative;
		top: 1vw;
	}



	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.u-grid {
		padding: 1vw 1vw 0vw;
	}

	.grid-text {
		margin-top: 1vw;
		font-weight: bold;
		font-size: 3vw;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.swiper {
		height: 480rpx;
	}

	.indicator-dots {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}

	.indicator-dots-active {
		background-color: $u-type-primary;
	}
	.flex_image2 {
	        width: 5vw;
			height: 5vw;
			border-radius: 0%;
			position: relative;
			top: 0vw;
	}
	.flex_image22 {
	        width: 7vw;
	            height: 5.5vw;
			border-radius: 0%;
			position: relative;
			top: 0vw;
	}
	.tab-bar {
		padding: 4vw 0vw;
	}
	
	.flex_image3 {
	    width: 6vw;
		height: 6vw;
		border-radius: 50%;
		position: relative;
		top: 2.5vw;
	}
	
	.flex_image4 {
		width: 6vw;
		height: 6vw;
		border-radius: 50%;
		position: relative;
		top: 2.4vw;
		left: 0vw;
	}
    .toptf{
		padding: 2vw 0vw 0vw;
	}
</style>

